<script setup>
	import {
		ref
	} from 'vue'

	const activeIndex = ref(0)

	// 当 swiper 下标发生变化时触发
	const onChange = (ev) => {
		activeIndex.value = ev.detail.current
	}
	// 定义 props 接收
	defineProps({
		list: {
			type: Array,
			required: true,
		},
	});
</script>

<template>
	<view class="carousel">
		<swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
			<swiper-item v-for="item in list" :key="item.id">
				<navigator url="/pages/index/index" hover-class="none" class="navigator">
					<image mode="aspectFill" class="image" :src="item.imageUrl"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view class="indicator">
			<text v-for="(item, index) in list" :key="item.id" class="dot"
				:class="{ active: index === activeIndex }"></text>
		</view>
	</view>
</template>

<style lang="scss">
	/* 轮播图 */
	.carousel {
		height: 280rpx;
		position: relative;
		overflow: hidden;
		transform: translateY(0);
		background-color: #efefef;

		.indicator {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 16rpx;
			display: flex;
			justify-content: center;

			.dot {
				width: 30rpx;
				height: 6rpx;
				margin: 0 8rpx;
				border-radius: 6rpx;
				background-color: rgba(255, 255, 255, 0.4);
			}

			.active {
				background-color: #fff;
			}
		}

		.navigator,
		.image {
			width: 100%;
			height: 100%;
		}
	}
</style>